﻿@page "/treemap/default-functionalities"

@using Syncfusion.Blazor.TreeMap
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the car sales of various countries in 2017 by rendering the countries at top level and car manufacturing companies as leaf items.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render a treemap with the provided data source. Palette color is applied for the items in treemap. Default legend is enabled in this example to represent the items in top level. Tooltip is enabled in this example.</p>
   <p>More information about treemap can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfTreeMap TValue="CarSalesDetails" Format="N0" EnableGroupingSeparator="true" WeightValuePath="Sales" RangeColorValuePath="Sales" DataSource="@DataSource" Palette="@Palette">
        <TreeMapTitleSettings Text="Car Sales by Country - 2017"/>
        <TreeMapLeafItemSettings LabelPath="Company">
            <TreeMapLeafBorder Color="#FFFFFF" Width="0.5"/>
        </TreeMapLeafItemSettings>
        <TreeMapLevels>
            <TreeMapLevel GroupPath="Continent">
                <TreeMapLevelBorder Color="#FFFFFF" Width="0.5"/>
            </TreeMapLevel>
        </TreeMapLevels>
        <TreeMapLegendSettings Visible="true" Position="LegendPosition.Top" Shape="LegendShape.Rectangle"/>
        <TreeMapTooltipSettings Visible="true"/>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href=" https://www.factorywarrantylist.com/car-sales-by-country.html/" target="_blank"> www.factorywarrantylist.com</a>
    </div>
</div>
@code {
    public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" };
    public class CarSalesDetails {
        public string Continent { get; set; }
        public string Company { get; set; }
        public int Sales { get; set; }
    }
    public List<CarSalesDetails> DataSource = new List<CarSalesDetails> {
        new CarSalesDetails { Continent="China", Company="Volkswagen", Sales=3005994 },
        new CarSalesDetails { Continent="China", Company="General Motors", Sales=1230044 },
        new CarSalesDetails { Continent="China", Company="Honda", Sales=1197023 },
        new CarSalesDetails { Continent="United States", Company="General Motors", Sales=3042775 },
        new CarSalesDetails { Continent="United States", Company="Ford", Sales=2599193 },
        new CarSalesDetails { Continent="United States", Company="Toyota", Sales=2449587 },
        new CarSalesDetails { Continent="Japan",Company="Toyota", Sales=1527977 },
        new CarSalesDetails { Continent="Japan", Company="Honda", Sales=706982 },
        new CarSalesDetails { Continent="Japan", Company="Suzuki", Sales=623041 },
        new CarSalesDetails { Continent="Germany",Company="Volkswagen", Sales=655977 },
        new CarSalesDetails { Continent="Germany", Company="Mercedes", Sales=310845 },
        new CarSalesDetails { Continent="Germany", Company="BMW", Sales=261931 },
        new CarSalesDetails { Continent="United Kingdom", Company="Ford ", Sales=319442 },
        new CarSalesDetails { Continent="United Kingdom", Company="Vauxhall", Sales=251146 },
        new CarSalesDetails { Continent="United Kingdom", Company="Volkswagen", Sales=206994 },
        new CarSalesDetails { Continent="India", Company="Maruti Suzuki", Sales=1443654 },
        new CarSalesDetails { Continent="India", Company="Hyundai", Sales=476241 },
        new CarSalesDetails { Continent="India", Company="Mahindra", Sales=205041 },
        new CarSalesDetails { Continent="France", Company="Renault", Sales=408183 },
        new CarSalesDetails { Continent="France", Company="Peugeot", Sales=336242 },
        new CarSalesDetails { Continent="France", Company="Citroen", Sales=194986 },
        new CarSalesDetails { Continent="Brazil", Company="Flat Chrysler", Sales=368842 },
        new CarSalesDetails { Continent="Brazil", Company="General Motors", Sales=348351 },
        new CarSalesDetails { Continent="Brazil", Company="Volkswagen", Sales=245895 },
        new CarSalesDetails { Continent="Italy", Company="Flat Chrysler", Sales=386260 },
        new CarSalesDetails { Continent="Italy", Company="Volkswagen", Sales=138984 },
        new CarSalesDetails { Continent="Italy", Company="Ford", Sales=125144 },
        new CarSalesDetails { Continent="Canada", Company="Ford", Sales=305086},
        new CarSalesDetails { Continent="Canada", Company="FCA", Sales=278011 },
        new CarSalesDetails { Continent="Canada", Company="GM", Sales=266884 },
   };
}